<template>
  <!--用车信息-->
  <view class="main_section">
    <view class="tab_section">
      <fui-segmented-control
          :radius="0"
          height="80"
          :values="tabList"
          @click="clickTab"
      ></fui-segmented-control>
    </view>

    <!--    会议用车-->
    <view class="section_1" v-if="tabId == 1">
      <view v-if="meetingVehicleUsageRecord.need_car != 1" class="btn_box"
            @click="openView(`/pages/index/meeting_car_form?meetingSubjectId=${meetingSubjectId}`)" style="color: #2a82e4;">
        尚未申请用车,点此立即申请
      </view>
      <view class="btn_box" v-if="meetingVehicleUsageRecord.need_car == 1 && meetingVehicleUsageRecord.list.length < 1">
        已申请用车,等待管理员配车中...
      </view>

      <view class="ul" v-if="meetingVehicleUsageRecord.list.length > 0">
        <view class="li" v-for="(v,k) in meetingVehicleUsageRecord.list" :key="k">
          <view class="box">
            <view class="left">
              <text>司机姓名</text>
              <text>{{ v.driver_name || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>

          <view class="box">
            <view class="left">
              <text>联系电话</text>
              <text>{{ v.phone || '' }}</text>
            </view>
            <view class="btn" v-if="(v.phone || '')" @click="callPhone(v.phone)">打电话</view>
            <view class="btn" v-else></view>
          </view>


          <view class="box">
            <view class="left">
              <text>车辆型号</text>
              <text>{{ v.vehicle_type || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>

          <view class="box">
            <view class="left">
              <text>车牌号</text>
              <text>{{ v.license_plate || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>

          <view class="box">
            <view class="left">
              <text>车辆颜色</text>
              <text>{{ v.color || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>
        </view>
      </view>
    </view>

    <!--    返程用车-->
    <view class="section_1" v-else>
      <view class="btn_box" v-if="meetingVehicleUsageRecord.back_need_car != 1"
            @click="openView(`/pages/index/back_receipt?meetingSubjectId=${meetingSubjectId}`)" style="color: #2a82e4;">
        尚未申请返程用车,点此立即申请
      </view>
      <view class="btn_box"
            v-if="meetingVehicleUsageRecord.back_need_car == 1 && meetingVehicleUsageRecord.list.length < 1">
        已申请用车,等待管理员配车中...
      </view>

      <view class="ul" v-if="meetingVehicleUsageRecord.back_need_car == 1 && meetingVehicleUsageRecord.list.length > 0">
        <view class="li" v-for="(v,k) in meetingVehicleUsageRecord.list" :key="k">
          <view class="box">
            <view class="left">
              <text>司机姓名</text>
              <text>{{ v.driver_name || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>

          <view class="box">
            <view class="left">
              <text>联系电话</text>
              <text>{{ v.phone || '' }}</text>
            </view>
            <view class="btn" v-if="(v.phone || '')" @click="callPhone(v.phone)">打电话</view>
            <view class="btn" v-else></view>
          </view>


          <view class="box">
            <view class="left">
              <text>车辆型号</text>
              <text>{{ v.vehicle_type || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>

          <view class="box">
            <view class="left">
              <text>车牌号</text>
              <text>{{ v.license_plate || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>

          <view class="box">
            <view class="left">
              <text>车辆颜色</text>
              <text>{{ v.color || '' }}</text>
            </view>
            <view class="btn"></view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      meetingSubjectId: '',//会议主题id


      meetingVehicleUsageRecord: {
        meeting_appointment_id: '',
        need_car: '',
        back_need_car: '',
        passenger_count: '',
        list: []
      },

      tabId: 1,
      tabList: [
        {
          id: 1,
          name: '会议用车'
        },
        {
          id: 2,
          name: '返程用车'
        }
      ]
    }
  },
  onLoad(options) {
    if (options.meetingSubjectId) {
      this.meetingSubjectId = options.meetingSubjectId
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    async init() {
      await this.getMeetingVehicleUsageRecordList()
    },

    //获取会议用车记录列表
    async getMeetingVehicleUsageRecordList() {
      let params = {
        meeting_subject_id: this.meetingSubjectId,
        type: this.tabId
      }
      let res = await apiRoute.getMeetingVehicleUsageRecordList(params)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.meetingVehicleUsageRecord = res.data
      console.log(123123, this.meetingVehicleUsageRecord)
    },


    clickTab(e) {
      console.log(e)
      this.tabId = e.id
      this.init()
    },

    //跳转页面
    openView(url) {
      //跳转页面
      uni.navigateTo({
        url: url
      });
      // uni.redirectTo({
      //   url: url,
      // })
    },

    //点击拨打电话
    callPhone(tel){
      uni.makePhoneCall({
        phoneNumber: tel
      });
    },

  }
}
</script>

<style lang="less" scoped>
.main_section{
  padding-top: 20rpx;
  padding-bottom: 40rpx;

  .section_1{
    .btn_box{
      margin-top: 30rpx;
      text-align: center;
      font-size: 35rpx;
    }
    .ul{
      margin-top: 30rpx;
      padding: 20rpx;

      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        padding: 20rpx;
        border: 1px solid #cccccc;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        .box{
          font-size: 30rpx;
          display: flex;
          justify-content: space-between;
          .left{
            display: flex;
            gap: 10rpx;
            text:nth-child(1){
              width: 140rpx;
            }
          }
          .btn{
            color: #2a82e4;
          }
        }
      }
    }
  }

}
</style>
